<template>
  <section>
    <!-- 已退费 -->
    <table border="0" width="100%" style="border-spacing: 0;border-collapse: collapse;">
      <tr>
        <td style="font-size:18px;">已退费列表</td>
        <td></td>
        <td style="text-align:right;vertical-align: top;">
          <el-form :inline="true">
            <el-form-item>
              <el-select
                v-model="form.patientId"
                filterable
                clearable
                remote
                reserve-keyword
                placeholder="请输入患者名字"
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <el-option v-for="item in options" :key="item.patientId" :label="item.name" :value="item.patientId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="form.startTime" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>----
              <el-date-picker v-model="form.endTime" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" circle icon="el-icon-search" @click="getData(-1)"></el-button>
            </el-form-item>
          </el-form>
        </td>
      </tr>
    </table>

    <div class="retail_box">
      <el-col
        v-for="(item, index) in tabList"
        :key="index"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="8"
        :xl="6"
        class="reserve-user-list"
        style="padding-left: 10px; padding-right: 10px;"
      >
        <div :class="['card-box', 'bg-sy']">
          <div class="card-nr">
            <div>
              <img src="@/img/unknown-avatar.png" alt class="head-img" style="width:70px;height:70px;" />
            </div>
            <div style="overflow: hidden;">
              <p class="overflow-omit">
                <span style="font-size:18px;">{{ item.patientName }}</span>
                &nbsp;
                <span>({{ item.sex | toSex }}&nbsp;{{ item.age }}岁)</span>
              </p>
              <div class="overflow-omit">
                <span>接诊科室：{{ item.deptName ? item.deptName : "无" }}</span>
              </div>
              <div class="overflow-omit">
                <span>接诊医生：{{ item.doctorName ? item.doctorName : "无" }}</span>
              </div>
              <div class="overflow-omit">
                <span>接诊时间：{{ item.cureTime | changeTime }}</span>
              </div>
              <div class="overflow-omit">
                <span>下单时间：{{ item.createTime | changeTime }}</span>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <div @click="getDetail(item.orderId, item.patientId)">退费：￥{{ item.payMoney }}</div>
            <div v-if="item.isReturnableMedicine" @click="$refs.refundMedicine.show(item.returnableMedicineList, item)">
              退药({{ item.returnableMedicineList.length }})
            </div>
          </div>
        </div>
      </el-col>
      <br />
      <el-col :span="24">
        <pager v-model="pager" @change-pagenum="getData"></pager>
      </el-col>
    </div>
    <RefundMedicine @done="updateRefundableToItem" ref="refundMedicine" />
  </section>
</template>
<script>
import RefundMedicine from "@components/refundMedicine";
import refundableMedicine from "@mixins/refundableMedicine.mixins";
export default {
  mixins: [refundableMedicine],
  components: {
    RefundMedicine
  },
  data() {
    return {
      form: {
        payStatus: 4,
        source: "",
        patientId: "",
        startTime: "",
        endTime: ""
      },
      showOrder: false,
      iframeContent: {},
      pager: { pageSize: 12, pageNum: 1, total: 0 },
      tabList: [],
      loading: false,
      options: []
    };
  },
  mounted() {
    //  this.form.startTime = this.getNewDate();
    this.form.startTime = this.getNewDate();
    this.form.endTime = this.getNewDate();
    this.getData();
  },
  activated() {
    this.getData();
  },
  methods: {
    getData(type) {
      this.showLoading();
      if (type == -1) {
        this.pager.pageNum = 1;
        this.pager.total = 0;
      }
      let j = {};
      j = Object.assign(this.form, this.pager);
      this.$api.getOrderRefundList(j).then(async res => {
        if (res.executed) {
          // 接入可退药的功能
          this.tabList = await this.extraRefundableToList(res.dataBody.list || []);
          this.pager.total = res.dataBody.total;
          this.showLoading(false);
        } else {
          this.$message.error(res.message);
          this.showLoading(false);
        }
      });
    },
    //模糊搜索
    remoteMethod(query) {
      let th = this;
      th.showLoading();
      if (query !== "") {
        th.loading = true;
        setTimeout(() => {
          th.loading = false;
          th.$api
            .getThePatientLibraryList({
              nameOrMobile: query,
              hpId: th.adminUser.hpId,
              pageNum: 1,
              pageSize: 100
            })
            .then(res => {
              if (res.executed) {
                if (res.dataBody != undefined) {
                  let List = res.dataBody.list;
                  th.options = List.filter(item => {
                    return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
                  });
                  // th.tableList = Arrary;
                  // th.pager.total = res.dataBody.total;
                } else {
                  th.tableList = [];
                  th.pager.total = 0;
                }
                th.showLoading(false);
              }
            });
        }, 200);
      } else {
        this.options = [];
      }
    },
    //获取详情
    getDetail(orderId, patientId) {
      let j = {};
      if (orderId) {
        j.id = orderId;
        j.patientId = patientId;
        this.addNavMenu("退费详情", "/page/returnDetail?" + this.$utils.JsonToUrl(this.getUrlToken(j)), "returnDetail");
        this.$router.push({
          path: "/page/returnDetail",
          query: this.getUrlToken(j)
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../_css/reserve.scss";
.pay_date {
  width: 40% !important;
}
</style>
